<template>
  <div class="matrix-catlog-list">
    <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" class="pa-5">
      <avue-crud
        ref="crud"
        v-model="form"
        :page.sync="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        :search.sync="searchForm"
        @on-load="loadListData"
        @search-change="onSearchChange"
        @search-reset="onSearchReset"
        @refresh-change="onRefresh"
        @selection-change="onSelectionChange"
        @filter-change="onFilterChange"
        @sort-change="onSortChange"
      >
        <template slot="menu" slot-scope="{ row }">
          <el-button type="text" size="small" @click="goDetail(row)">详情</el-button>
          <el-button
            v-if="row.approveStatus === '2' || !row.approveStatus"
            type="text"
            size="small"
            @click="goApply(row)"
            >申请</el-button
          >
          <el-button
            v-clipboard:copy="getStr(row)"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
            type="text"
            size="small"
            @click.stop
            >复制API</el-button
          >
        </template>
        <template slot="publishStatus" slot-scope="{ row }">
          <span v-if="row.publishStatus > 0">
            <span class="status-dot success"></span>
            已发布
          </span>
          <span v-else>
            <span class="status-dot danger"></span>
            未发布
          </span>
        </template>
        <template slot="approveStatus" slot-scope="{ row }">
          <span class="approve-status" @click="goApplyDetail(row)">
            <span v-if="row.approveStatus === '2'" class="clickable">
              <span class="status-dot danger"></span>已驳回
            </span>
            <span v-else-if="row.approveStatus === '1'" class="clickable">
              <span class="status-dot success"></span>已授权
            </span>
            <span v-else-if="row.approveStatus === '0'"> <span class="status-dot warning"></span>已申请 </span>
            <span v-else> <span class="status-dot info"></span>无权限 </span>
          </span>
        </template>
      </avue-crud>
    </de-container>
  </div>
</template>

<script>
import { requestTargetCatalogPage } from '@/api/chart/chart'
import DeContainer from '@/components/dataease/DeContainer'
import ListMixin from '@/utils/mixins/list-mixin'
import { DATA_TYPE_OPTIONS } from './indicator-definition.vue'

export default {
  name: 'Chart',
  components: { DeContainer },
  mixins: [ListMixin],
  data() {
    return {
      listApi: requestTargetCatalogPage,
      tableOption: {
        menuWidth: 180,
        menuAlign: 'left',
        addBtn: false,
        editBtn: false,
        viewBtn: false,
        delBtn: false,
        selection: false,
        index: true,
        searchLabelWidth: 100,
        searchMenuPosition: 'left',
        column: [
          {
            label: '指标编码',
            prop: 'code',
            span: 12,
            align: 'left',
            overHidden: true,
          },
          {
            label: '指标名称',
            prop: 'name',
            span: 12,
            align: 'left',
            search: true,
            overHidden: true,
          },
          {
            label: '指标分类',
            prop: 'indexType',
            type: 'select',
            span: 12,
            align: 'left',
            search: true,
            overHidden: true,
            dicUrl: '/api/sys/dict/list',
            props: {
              label: 'dictValue',
              value: 'dictValue',
            },
            dicMethod: 'post',
            dicQuery: {
              dictTypeCode: 'martix_type',
            },
          },
          {
            label: '指标定义',
            prop: 'indexDefine',
            span: 12,
            align: 'left',
            overHidden: true,
          },
          {
            label: '描述',
            prop: 'remark',
            span: 12,
            overHidden: true,
          },
          {
            label: '数值类型',
            prop: 'dataType',
            type: 'select',
            search: true,
            span: 8,
            dicData: DATA_TYPE_OPTIONS,
          },
          {
            label: '责任单位',
            type: 'tree',
            prop: 'company',
            span: 12,
            align: 'center',
            overHidden: true,
            dicUrl: '/api/dept/tree',
            props: {
              label: 'name',
              value: 'deptId',
            },
            dicMethod: 'post',
          },
          {
            label: '责任人',
            type: 'select',
            prop: 'director',
            span: 12,
            align: 'center',
            overHidden: true,

            dicUrl: '/api/user/userGrid/1/999',
            props: {
              label: 'nickName',
              value: 'userId',
            },
            dicMethod: 'post',
            dicFormatter: (res) => res.listObject,
          },
          {
            label: '发布时间',
            prop: 'createdAt',
            span: 24,
            width: 150,
            align: 'center',
          },
          {
            label: '发布状态',
            prop: 'publishStatus',
            type: 'select',
            span: 12,
            align: 'center',
            overHidden: true,
            dicData: [
              { label: '未发布', value: 0 },
              { label: '已发布', value: 1 },
            ],
            hide: true,
            showColumn: true,
          },
          {
            label: '授权状态',
            prop: 'approveStatus',
            type: 'select',
            span: 12,
            align: 'center',
            overHidden: true,
            dicData: [
              { label: '无权限', value: null },
              { label: '已申请', value: '0' },
              { label: '已授权', value: '1' },
              { label: '已驳回', value: '2' },
            ],
          },
        ],
      },
    }
  },
  methods: {
    getStr(row) {
      let s = `curl -X POST https://hyida.cosmoplat.com/mctapi/dataset/table/getMatrixData 
      -H 'Content-Type: application/json;charset=utf-8' \\
      -d '{
  "apiKey": "xxxxxxxxxxxxxxxxxxxx",
  "matrixId": "${row.id}",
  "filters": {}, //{"type": "BETWEEN", "value": "2023-12-01, 2023-12-31"} type类型：EQ等于 BETWEEN区间 GT大于 GE大于等于 LT小于 LE小于等于
  "orderType": "DESC", //ASC或DESC
  "rows": 10
}'`
      return s
    },
    onCopy(e) {
      this.$success(this.$t('commons.copy_success'))
    },
    onError(e) {},
    goDetail(row) {
      if (row.approveStatus === '1') {
        this.$router.push(`/redirect/charts/view/${row.id}/?panelId=${row.panelId}`)
        return
      }
      this.$router.push(`/redirect/charts/${row.id}/view?type=2`)
    },
    goApply(row) {
      this.$router.push(`/redirect/charts/${row.id}/apply`)
    },
    goApplyDetail(row) {
      if (row.approveStatus === '1' || row.approveStatus === '2') {
        this.$router.push(`/redirect/charts/${row.approveId}/apply-detail`)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.matrix-catlog-list {
  .approve-status {
    .clickable {
      cursor: pointer;
      &:hover {
        text-decoration: underline;
        color: var(--primary-color);
      }
    }
  }
}
</style>
